<template>
	<u-overlay :show="modalShow">
		<view class="mark">
			<view class="diaBox">
				<view class="boxBody">
					<image class="bodyImg" src="../../static/inviteDia/body.png" mode="widthFix"></image>
					<view class="view-input">
						<view class="view-cent">
							<input class="uni-input" v-model="qecodeDeta.invitationCode" focus placeholder="请输入邀请码" />

							<!-- #ifdef APP-PLUS -->
							<view class="Scan_wrap" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">
								<uni-icons type="scan" size="20" class="scan_icon"></uni-icons>
							</view>
							<!-- #endif  -->

							<!-- #ifndef APP-PLUS -->
							<view class="Scan_wrap">
								<image src="@/static/home/Scan.png" mode="widthFix" class="scan" @click="onScan">
								</image>
							</view>
							<!-- #endif  -->
						</view>
					</view>
					<view class="confirmBtn" @click="onsubmit">
						<image src="../../static/inviteDia/btn.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="closeBtn" @click="closes">
					<image src="../../static/inviteDia/close.png" mode="widthFix"></image>
				</view>
			</view>

			<!-- 提示 -->
			<uni-popup ref="alertDialog" type="dialog">
				<view class="dialog_cent">
					<view class="dialog_text">
						{{message}}
					</view>
					<view class="dialog_btn" @click="close">
						确定
					</view>
				</view>

			</uni-popup>

			<!-- <onLoading :loading="true"></onLoading>> -->
			<on-loading :loading='onloading'></on-loading>
			<permission-popup ref="authpup" type="top" :isNativeHead="false" @changeAuth="changeAuth"
				:permissionID="permissionID"></permission-popup>
		</view>
	</u-overlay>
</template>

<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	import {
		inviteCode,
		addOrDelete,
	} from "@/api/apis.js";

	import {
		mapState,
		mapMutations
	} from "vuex";

	export default {
		components: {
			permissionPopup
		},
		data() {
			return {
				// StatusBarHeight: "",
				qecodeDeta: {
					invitationCode: "",
					type: 0,
				},
				type: 'center',
				msgType: 'success',
				value: '',
				message: "",
				success: false,
				onloading: false, //加载中
				permissionID: '',
				modalShow: false,
			};
		},

		onLoad() {
			// this.StatusBarHeight = getStatusBarHeight()
		},

		mounted() {},
		onShow() {
			this.getClipboardData() //获取剪切板内容
		},

		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},

		methods: {
			...mapMutations("userInfo", ['setStoreForm']),

			opens() {
				console.log(12312312312);
				this.modalShow = true
			},

			closes() {
				this.modalShow = false
				uni.reLaunch({
					url: "/pages/index/index?status=1"
				})
			},
			// 获取剪切内容
			getClipboardData(data) {
				let that = this
				uni.getClipboardData({
					success: (res) => {
						console.log('剪切板内容：', res.data);
						// 处理获取到的剪切板内容  
						let Invitation = res.data.match(/∞([^∞]*)∞/);
						this.qecodeDeta.type = 0 //用户邀请
						// this.qecodeDeta.invitationCode = Invitation[1] //邀请码
						this.qecodeDeta.invitationCode = res.data //邀请码
					},
					fail: (err) => {
						console.error('获取剪切板内容失败：', err);
						// this.onShowModel()
					}
				});
			},

			//打开自定义权限目的弹框
			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
						permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.onScan()
				}
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				this.onScan() //调用相册功能
			},

			//扫码
			onScan() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.qecodeDeta = JSON.parse(res.result)
					}
				});
			},

			onsubmit() {
				let params = {
					"inviteCode": this.qecodeDeta.invitationCode,
					"type": this.qecodeDeta.type, //邀请类型 0、用户邀请 1、店铺邀请
				}
				this.onloading = true
				inviteCode(params).then(res => {
					if (res.success) {
						this.dialogToggle('success')
						this.message = "绑定成功"
						this.success = res.success

						let tabs = [{
								title: "美传自营店",
								id: 1,
							},
							// 可以继续添加更多的 Tab
						]
						let result = res.result
						if (result.storeId && result.storeId != null) {
							if (result.storeId != 1) {
								let item = {
									title: result.storeName,
									id: result.storeId
								}
								tabs.unshift(item)
							}
						}
						this.setStoreForm(tabs)
						this.setStoreId(result.storeId) //设置店铺
					} else {
						this.dialogToggle('success')
						this.message = "验证码填写错误， 请重新填写"
						this.success = res.success
					}
				}).finally(() => {
					this.onloading = false
				})
			},

			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},

			close() {
				this.$refs.alertDialog.close()
				if (this.success) {
					uni.reLaunch({
						url: "/pages/index/index?status=1"
					})
				}
			},

			// 跳转回首页
			back() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.mark {
		// position: fixed;
		// top: 0;
		// left: 0;
		// width: 100%;
		// height: 100vh;
		// background: rgba(0, 0, 0, 0.2);
		// z-index: 999;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.diaBox {
			width: 600rpx;
			height: 850rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.boxBody {
				position: relative;

				.bodyImg {
					width: 100%;
				}

				.view-input {
					// margin-top: 64rpx;
					display: flex;
					justify-content: center;
					position: absolute;
					left: 0;
					right: 0;
					top: 250rpx;
					margin: auto;
					width: 60%;
					border-radius: 20rpx;
					box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);

					.view-cent {
						position: relative;
						text-align: left;
						width: 100%;
						height: 90rpx;

						.uni-input {
							box-sizing: border-box;
							padding-left: 30rpx;
							width: 100%;
							height: 100%;
							background-color: #F6F7F9;
							border: 4rpx solid #E3604F;
							border-radius: 20rpx;

							::v-deep .uni-input-wrapper {
								width: 75%;
							}
						}

						.Scan_wrap {
							position: absolute;
							width: 40rpx;
							height: 40rpx;
							// padding-left: 15rpx;
							// padding-right: 15rpx;
							right: 30rpx;
							// top: calc(50% - 20rpx);
							top: 0;
							bottom: 0;
							margin: auto;

							.scan {
								width: 100%;
								height: 100%;
								display: block;
							}
						}


					}
				}

				.confirmBtn {
					cursor: pointer;
					position: absolute;
					left: 0%;
					right: 0%;
					bottom: 40rpx;
					width: 70%;
					margin: auto;

					image {
						width: 100%;
					}
				}
			}

			.closeBtn {
				cursor: pointer;
				width: 40px;
				height: 40px;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}

	.dialog_cent {
		width: 578rpx;
		height: 354rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding-top: 109rpx;

		.dialog_text {
			text-align: center;
			margin-bottom: 90rpx;
		}

		.dialog_btn {
			margin: 0 auto;
			width: 498rpx;
			height: 84rpx;
			background: #E3604F;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}
</style>